<script setup>
import SideBarVue from "./home/SideBar.vue";
// import Main from "./home/Main.vue";
import TopNav from "./home/TopNav.vue";
import { ref, onMounted, watch, provide } from "vue";
import { RouterView } from "vue-router";

// const MainCom = ref(null);
const main = ref(null);
const isOpen = ref(true);
const topNav = ref(null);
const flag = ref(false);
onMounted(() => {
  isOpen.value = topNav.value.asideFlag;
  // console.log(topNav.value.asideFlag);
});
watch(
  () => topNav.value?.asideFlag,
  (newValue) => {
    isOpen.value = newValue;
  }
);
const goTop = () => {
  main.value.scrollTo({
    top: 0,
    behavior: "smooth",
  });
};
// 暴露方法
provide("goTop", goTop);
const scrollVal = () => {
  // console.log(main.value.scrollTop)
  if (main.value.scrollTop > 90) {
    flag.value = true;
  } else {
    flag.value = false;
  }
};
</script>

<template>
  <div class="box">
    <div :class="['left', isOpen ? 'open' : 'close']">
      <SideBarVue :isOpen="isOpen"></SideBarVue>
    </div>
    <div :class="['top', isOpen ? 'open' : 'close']">
      <TopNav ref="topNav" :flag="flag"></TopNav>
    </div>
    <div ref="main" :class="['right', isOpen ? 'open' : 'close']" @scroll="scrollVal">
      <!-- <Main ref="MainCom"></Main> -->
      <RouterView></RouterView>
      <i class="iconfont icon-icon_huidaodingbu" v-if="flag" @click="goTop"></i>
      <div class="bottom">
        <bottomCom></bottomCom>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import url("/src/assets/style/homePage/index.scss");
</style>
